<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../html/css/index.css">
</head>

<style>
    .info-bar {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;

        padding: 10px;
        font-size: 20px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 28px;
        background-color: #dcd7d7;
        color: white;
        text-align: center;
        z-index: 1000;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.27);
        /*  水平偏移-垂直偏移-模糊半径-颜色 */
    }


    #img-nya {
        width: 40px;
        height: 40px;
        border-radius: 14px;
    }

    .flex-item {}

    .info-bar:nth-child(1) {}

    .flex-item:nth-child(2) {}

    .flex-item:nth-child(3) {}

    .flex-item:nth-child(4) {
        padding-right: 700px;
    }

    .flex-item:nth-child(6) {
        padding-right: 200px;
    }



    /* 内容展示区代码 */
    .content {
        height: 250px;
        margin-top: 150px;
        margin-left: 20%;
        margin-right: 20%;
        margin-bottom: 100px;
    }

    .content-item {
        height: 200px;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .content-left {
        display: flex;
        flex-direction: column;
    }

    #content-left-btn {
        margin-top: 50px;
        width: 150px;
        height: 50px;
        border-radius: 5px;
    }


    #content-right-img {
        max-height: 250px;
        width: auto;
        margin-left: 100px;
        margin-bottom: 200px;
    }


    /* 介绍部分代码 */
    .intro {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    .intro-item {
        width: 600px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 100px;
    }

    .intro-item-text {
        display: flex;
        flex-direction: column;
        padding-top: 20px;
        width: 300px;
        gap: 5px;
    }


    .intro-item-text-title {
        font-size: 25px;
        font-weight: 500;
    }

    .intro-item-text-content {
        font-size: 15px;
        color: #887777;
    }


    #intro-item-people {
        max-height: 200px;
        width: auto;
    }

    #intro-item-xiexie {
        max-height: 150px;
        width: auto;
    }
</style>

<body>
    <div>
        <div class="info-bar">
            <img src="../img/nya.png" alt="" id="img-nya" class="flex-item">
            <span class="flex-item">喵助屋</span>
            <span class="flex-item">推荐</span>
            <span class="flex-item">发现</span>
            <span class="flex-item">消息</span>
            <span class=="flex-item">个人界面</span>
        </div>
        <div class="content">
            <div class="content-item">
                <div class="content-left">
                    <span style="font-size: 30px; margin-bottom: 10px; font-weight: 800;">喵助屋---为你所热爱的发电</span>
                    <span style="font-size: 15px;">喵助一下，为爱发电！</span>
                    <button id="content-left-btn">开始创作</button>
                </div>
                <div class="content-right">
                    <img src="../img/conten-right.png" alt="" id="content-right-img">
                </div>
            </div>
        </div>

        <div>
            <div class="intro">
                <div> <span style="font-size: 30px;">喵助屋的特色</span></div>
                <div class="intro-item">
                    <img src="../img/people.png" alt="" id="intro-item-people">
                    <div class="intro-item-text">
                        <span class="intro-item-text-title">展示你的风采</span>
                        <span class="intro-item-text-content">你的创作的作品能够给你带来收益</span>
                    </div>
                </div>
                <div class="intro-item">
                    <div class="intro-item-text">
                        <span class="intro-item-text-title">提供专业的服务</span>
                        <span class="intro-item-text-content">专业的服务团队为你提供最优质的服务,为你提供更便捷的下载</span>
                    </div>
                    <img src="../img/people2.png" alt="" id="intro-item-people">
                </div>
                <div class="intro-item">
                    <img src="../img/xiexie.png" alt="" id="intro-item-xiexie">
                    <div class="intro-item-text">
                        <span class="intro-item-text-title">感谢你的支持</span>
                        <span class="intro-item-text-content">如果遭遇bug,请及时联系我们,我们会及时修复</span>
                    </div>
                </div>
            </div>
        </div>

    </div>

</body>

</html>